<settings-screen>
  <email-settings-warning function="'invite emails'"></email-settings-warning>

  <div ng-show="selectedTab == 'profile'">
    <div class="row">
      <div class="col-md-4 col-md-offset-4 profile__container">

        <img ng-src="{{ user.profile_image_url }}" class="profile__image" width="40">

        <h3 class="profile__h3">{{user.name}}</h3>

        <hr>

        <form class="form" name="userSettingsForm" ng-submit="updateUser(userSettingsForm)" novalidate>
          <div class="form-group" ng-class="{ 'has-error':  (userSettingsForm.name | showError )}">
            <label class="control-label" for="name" >Name</label>
            <input name="name" id="name" type="text" class="form-control" ng-model="user.name" required
              ng-readonly="user.is_disabled">
            <error-messages input="userSettingsForm.name" form="userSettingsForm"></error-messages>
          </div>
          <div class="form-group" ng-class="{ 'has-error':  (userSettingsForm.email | showError )}">
            <label class="control-label" for="email" >Email</label>
            <input name="email" id="email" type="email" class="form-control" ng-model="user.email" required
              ng-readonly="user.is_disabled">
            <error-messages input="userSettingsForm.email" form="userSettingsForm"></error-messages>
          </div>
          <div class="form-group d-flex justify-content-between" ng-if="!user.is_disabled">
            <button type="submit" class="btn btn-primary">Save</button>
            <button type="button" class="btn btn-default" ng-click="disableUser(user)">Disable</button>
          </div>
        </form>

        <hr>

        <div ng-if="user.is_disabled" class="d-flex justify-content-between align-items-center">
          <strong>This user is disabled.</strong>
          <button type="button" class="btn btn-primary" ng-click="enableUser(user)">Enable</button>
        </div>

        <div ng-if="!user.is_disabled">
          <div class="form-group">
            <label class="control-label">API Key</label>
            <input type="text" class="form-control" value="{{user.api_key}}" size="44" readonly/>
          </div>

          <hr>

          <button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Change password <span class="caret"></span></button>

          <div uib-collapse="isCollapsed">
            <div class="well">
              <form class="form" name="userPasswordForm" ng-submit="savePassword(userPasswordForm)" novalidate>
                <div class="form-group required" ng-class="{ 'has-error':  (userPasswordForm.currentPassword | showError:userPasswordForm )}">
                  <label class="control-label">Current Password</label>
                  <input name="currentPassword" class="form-control" type="password" ng-model="password.current" required/>
                  <error-messages input="userPasswordForm.currentPassword" form="userPasswordForm"></error-messages>
                </div>
                <div class="form-group required" ng-class="{ 'has-error':  (userPasswordForm.newPassword | showError:userPasswordForm )}">
                  <label class="control-label">New Password</label>
                  <input name="newPassword" class="form-control" type="password" ng-model="password.new" ng-minlength="6"
                         required/>
                  <error-messages input="userPasswordForm.newPassword" form="userPasswordForm"></error-messages>
                </div>
                <div class="form-group required" ng-class="{ 'has-error':  (userPasswordForm.passwordRepeat | showError:userPasswordForm )}">
                  <label class="control-label">Repeat New Password</label>
                  <input name="passwordRepeat" class="form-control" type="password" ng-model="password.newRepeat"
                         compare-to="password.new"/>
                  <span class="help-block error"
                        ng-if="userPasswordForm.passwordRepeat.$error.compareTo">Passwords don't match.</span>
                </div>
                <div class="form-group">
                  <button class="btn btn-primary">Set new password</button>
                </div>
              </form>
            </div>
          </div>

          <div ng-if="currentUser.isAdmin">
            <br>
            <div class="form-group">
              <button class="btn btn-default" ng-click="sendPasswordReset()" ng-disabled="disablePasswordResetButton">Send
                Password Reset Email
              </button>
            </div>

            <div ng-if="passwordResetLink" class="alert alert-success">
              <p ng-if="!clientConfig.mailSettingMissing">
                <strong>The user should receive a link to reset their password by email soon.</strong>
              </p>
              <p ng-if="clientConfig.mailSettingsMissing">
                You don't have mail server configured, please send the following link
                to {{user.name}} to reset their password:<br/>
                <textarea class="form-control m-t-10" rows="2" readonly>{{ passwordResetLink }}</textarea>
              </p>
            </div>
          </div>
      </div>
      </div>
    </div>
  </div>
</settings-screen>
